{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-100px{width: 100px;}
	.w-200px{width: 200px;}
	#container{line-height: 1;}
	.el-date-editor .el-range-separator{width:auto;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

		  <el-form-item label="接收人群" prop="crowd">
		    <el-radio-group v-model="form.crowd" @change="countUserSum">
		      <el-radio :label="'all'">所有人</el-radio>
		      <el-radio :label="'appoint'">指定用户</el-radio>
		      <el-radio :label="'company'">企业用户</el-radio>
		      <el-radio :label="'personal'">个人用户</el-radio>
		      <el-radio :label="'mp'">关注公众号用户</el-radio>
		      <el-radio :label="'mobile'">绑定手机号用户</el-radio>
		      <el-radio :label="'email'">绑定邮箱用户</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item label="套餐">
		  	<el-radio-group v-model="form.vip_level" @change="countUserSum">
			    <el-radio label="all">不限</el-radio>
			    <el-radio v-for="(v,index) in vip" :label="v.level" v-if="v.is_company">{{v.title}}</el-radio>
			</el-radio-group>
		  </el-form-item>

		  <el-form-item label="用户搜索类型" prop="search_type" v-if="form.crowd==='appoint'">
		    <el-radio-group v-model="search.search_type" @change="search.key='';">
		      <el-radio :label="'uid'">UID</el-radio>
		      <el-radio :label="'company_name'">公司名</el-radio>
		      <el-radio :label="'resume_name'">简历名</el-radio>
		      <el-radio :label="'mobile'">手机号</el-radio>
		      <el-radio :label="'email'">邮箱</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item :label="getSearchType()" prop="key" v-if="form.crowd==='appoint'">
		    <el-autocomplete v-model="search.key"
		    clearable
			  :fetch-suggestions="querySearchAsync"
			  @select="handleSelect" style="width: 400px;"></el-autocomplete>
		  </el-form-item>

		  <el-form-item label="注册时间" prop="register_time">
		    <el-date-picker
		      v-model="form.register_time"
		      type="daterange"
		      align="right"
		      unlink-panels
		      range-separator="至"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期"
		      :picker-options="pickerOptions"
		      format="yyyy-M-d"
		      value-format="yyyy-M-d"
		      @change="countUserSum">
		    </el-date-picker>
		  </el-form-item>

		  <el-form-item label="已选用户" prop="user_list" v-if="form.crowd==='appoint'">
		  	<el-tag
			  	v-for="v in user_list"
			  	:key="v"
			  	closable
  				@close="handleClose(v)"
  				class="mr-2">
			  	{{v.value}}
			</el-tag>
		  </el-form-item>

		  <el-form-item label="结果" v-if="form.crowd==='appoint'">
		  	共{{user_list.length}}人
		  </el-form-item>

		  <el-form-item label="结果" v-else>
		  	共{{search.total}}人
		  </el-form-item>
		  <el-divider></el-divider>
		  <el-form-item label="套餐">
		  	<el-radio-group v-model="form.vip_id" @change="setVipFind">
			    <el-radio v-for="(v,index) in VipList" :label="v.id"><span class="pr-1">{{v.title}}</span><span class="text-small text-primary" v-if="v.is_company">[企业]</span><span class="text-small text-success" v-else>[个人]</span></el-radio>
			</el-radio-group>
		  </el-form-item>

		  <el-form-item label="规则">
		  	<div class="row mx-0">
			  	<div class="col-6" v-for="(rule,index) in form.vip_rule" v-if="rule.type==='input' && not_alias.indexOf(rule.alias)===-1">
				  	<el-input placeholder="请输入内容" v-model="rule.value" class="col-8 px-0 mb-0" :disabled="!rule.checked">
					    <template slot="prepend"><div class="w-100px">{{rule.title}}</div></template>
					    <template slot="append">{{rule.unit}}</template>
					</el-input>
					<el-switch
					  v-model="rule.checked"
				      :active-value="1"
				      :inactive-value="0"
					  active-color="#13ce66"
					  inactive-color="#666666">
					</el-switch>
					<div class="small text-secondary">{{rule.desc}}</div>
			  	</div>
		  	</div>
		  </el-form-item>

		  <el-form-item label="有效期" prop="end_time" v-if="FindVip.expiry_type">
		    <el-date-picker
		      v-model="form.end_time"
		      align="right"
		      type="datetime"
		      format="yyyy-M-d HH:mm:ss"
		      value-format="yyyy-M-d HH:mm:ss"
		      :picker-options="endPickerOptions"
		      placeholder="End Time">
		    </el-date-picker>
		  </el-form-item>

		  <el-form-item>
		    <el-button type="primary" @click="submitForm('form')">赠送</el-button>
		  </el-form-item>
		</el-form>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="user_list"}
	var user_list=[];
	var user_list_uid=[];
	var crowd='all';
	{else/}
	var crowd='appoint';
	var user_list={:json_encode($user_list,JSON_UNESCAPED_UNICODE)};
	var user_list_uid=[];
	for (var i = 0; i < user_list.length; i++) {
		user_list_uid.push(user_list[i].uid);
	}
	{/empty}
	{empty name="vip"}
	var vip=[];
	{else/}
	var vip={:json_encode($vip,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="VipList"}
	var VipList=[];
	{else/}
	var VipList={:json_encode($VipList,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			not_alias:['time-limit'],
			vip:vip,
			VipList:VipList,
			user_list:user_list,
			FindVip:{
				expiry_type:0
			},
			form:{
				crowd:crowd,
				user_list:user_list_uid,
				register_time:[],
				vip_rule:[],
				vip_level:'all',
				vip_id:'',
				end_time:'',
			},
			search:{
				search_type:'uid',
				key:'',
				ajax:false,
				total:0,
			},
	        endPickerOptions: {
	          disabledDate(time) {
	            return time.getTime() < Date.now();
	          },
	      	},
	        pickerOptions: {
	          disabledDate(time) {
	            return time.getTime() > Date.now();
	          },
	          shortcuts: [{
	            text: '今日',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24);
	              picker.$emit('pick', [start, end]);
	            }
	          },{
	            text: '三天内',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
	              picker.$emit('pick', [start, end]);
	            }
	          },{
	            text: '最近一周',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近三个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
	              picker.$emit('pick', [start, end]);
	            }
	          }]
	        },
	        rules: {
	          crowd: [
	            { required: true, message: '请选择接收人群', trigger: 'blur' },
	          ],
	          end_time: [
	            { required: true, message: '请选择有效期', trigger: 'change' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
			this.countUserSum();
		},
		methods:{
			setVipFind(val){
				for (var i = 0; i < this.VipList.length; i++) {
					if (this.VipList[i].id===val) {
						this.FindVip=this.VipList[i];
						this.form.vip_rule=this.VipList[i].rule;
						break;
					}
				}
			},
		    countUserSum() {
		    	var _this=this;
		    	if (this.form.crowd==='appoint')return this.search.total=0;
		    	if (this.search.ajax)return;
		    	this.search.ajax=true;
		    	this.search.crowd=this.form.crowd;
		    	this.search.vip_level=this.form.vip_level;
		    	this.search.register_time=this.form.register_time;
		    	$.getJSON('',this.search,function(ret){
		    		_this.search.ajax=false;
		    		if (ret) {
		    			if (ret.code === 0) {
		    				_this.search.total=ret.data;
		    			}else{
		    				XYBase.msg(ret.msg);
		    			}
		    		}
		    	});
		    },
		    handleClose(tag) {
		    	var index=this.user_list.indexOf(tag);
		        this.user_list.splice(index, 1);
		        this.form.user_list.splice(index, 1);
		    },
	    	getSearchType(){
	    		var text='UID';
	    		switch(this.search.search_type){
	    			case 'uid':
	    				text='UID';
	    				break;
	    			case 'company_name':
	    				text='公司名';
	    				break;
	    			case 'resume_name':
	    				text='简历名';
	    				break;
	    			case 'mobile':
	    				text='手机号';
	    				break;
	    			case 'email':
	    				text='邮箱';
	    				break;
	    		}
	    		return text;
	    	},
		    querySearchAsync(queryString, cb) {
		    	if (this.search.ajax || !queryString)return;
		    	$.getJSON('/user/searchUser',this.search,function(ret){
		    		if (ret) {
		    			if (ret.code === 0) {
		    				cb(ret.data);
		    			}else{
		    				XYBase.msg(ret.msg);
		    			}
		    		}
		    	});
		    },
		    handleSelect(item) {
		    	var index=this.form.user_list.indexOf(item.uid);
		    	if (index>=0) return XYBase.msg('该用户已在选中列表');
		    	if (this.user_list.length>=100) return XYBase.msg('最大可选择100个用户');
		    	this.user_list.push(item);
		    	this.form.user_list.push(item.uid);
		    },
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				if (D.crowd==='appoint'){
					if(this.user_list.length<=0)
					return XYBase.msg('当前可赠送人数为0');
				}else{
					if(this.search.total<=0)
					return XYBase.msg('当前可赠送人数为0');
				}
				var ruleStatus=true;
				for (var i = 0; i < D.vip_rule.length; i++) {
					if(D.vip_rule[i].checked&&D.vip_rule[i].value){
						ruleStatus=false;
						break;
					}
				}
				if (ruleStatus)
					return XYBase.msg('当前无可赠送规则');


				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:'',
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									setTimeout(function(){
										window.location.href='/user/vip/getRights';
									},1500)
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}